import type { EaseTabs } from "../index";
export class Style {
    eTabs: EaseTabs;
    constructor(eTabs: EaseTabs){
        this.eTabs = eTabs;
        this.render();
    }
    getClass() {
        const names = this.eTabs.names;
        const theme = this.eTabs.theme;
        return `
            @keyframes ${names.tabClassName}-spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .${names.tabWrapClassName} *{margin:0; padding:0;}
            .${names.tabWrapClassName}[is-small] .${names.tabClassName}-title{ display: none; }
            .${names.tabWrapClassName}[is-mini] .${names.tabContainerClassName}.${names.tabContainerClassName}-focus img{ display: none; }
            .${names.tabWrapClassName}[is-mini] .${names.tabContainerClassName}:not(.${names.tabContainerClassName}-focus) .${names.tabClassName}-close{ display: none; }
            .${names.tabWrapClassName}{ box-sizing: content-box; height: 32px; padding:6px 10px 0 10px;margin:0; list-style:none; display:flex;user-select: none;}
            .${names.tabWrapClassName} > li{ list-style:none; width:220px; position: relative; }
            .${names.tabWrapClassName} > li:first-child .${names.tabClassName}::after{ display:none; }
            .${names.tabWrapClassName} > li:first-child .${names.tabClassName}::before{ display:none; }

            .${names.tabClassName}{
                display: flex;
                align-items: center;
                height:100%;
                font-size:12px;
                line-height:32px;
                overflow: visible;
                width:100%;
                position: absolute;
                box-sizing: border-box;
                z-index:1;
            }
            .${names.tabContainerClassName}-dragging{
                opacity: 0;
                background-color: transparent;
                border: 2px dashed #ccc;
            }
            .${names.tabContainerClassName}-dragging img, .${names.tabContainerClassName}-dragging span{
                display: none;
            }
            .${names.tabClassName}-over{ opacity: .6; }
            .${names.tabClassName} .${names.tabClassName}-close{
                z-index:2;
                flex-grow: 0;
                flex-shrink: 0;
                position: relative;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 8px 8px;
                margin-right: 8px;
            }

            .${names.tabContainerClassName}.${names.tabIconClassName} {padding-left: 8px; }
            .${names.tabWrapClassName}[is-small] .${names.tabClassName}.${names.tabIconClassName} {padding-left: 8px; }
            .${names.tabClassName}.${names.tabIconClassName} img{margin: 0 2px; width:16px; height: 16px; }
            .${names.tabClassName}.${names.tabLoadingClassName} {padding-left: 8px; }
            .${names.tabWrapClassName}[is-small] .${names.tabClassName}.${names.tabLoadingClassName} {padding-left: 8px; }
            .${names.tabClassName}.${names.tabLoadingClassName} img{margin: 0 2px; width:16px; height: 16px; animation: ${names.tabClassName}-spin 2s linear infinite; }

            
            .${names.tabFocusClassName} {border-radius: 8px 8px 0 0; height: 32px;right:-2px; z-index:2;}
            // .${names.tabFocusClassName} .${names.tabIconClassName}{padding-left: 8px; border-radius : 8px 8px 0 0; height: 32px;right:-2px; z-index:2;}
            .${names.tabContainerClassName} .${names.tabClassName} {padding-left: 8px;}


            .${names.tabWrapClassName}{ background:${theme.default}; border-bottom:4px solid ${theme.wrapBottomColor};}
            .${names.tabContainerClassName}{ color:${theme.tabTextColor}; }
            .${names.tabContainerClassName} .${names.tabClassName}-close{background-image: url("${theme.closeIcon}"); }
            .${names.tabWrapClassName} > li:first-child::after{ display: none; }
            .${names.tabFocusClassName}::after{ display:none; }
            .${names.tabContainerClassName}:hover{ background:${theme.overTabBackgroundColor}; }
            .${names.tabContainerClassName}-over::after{ background:${theme.splitBorderOverColor}; }
            .${names.tabWrapClassName} li .${names.tabClassName} .${names.tabClassName}-title{
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                -webkit-mask-image: linear-gradient(90deg, ${theme.default} 0%, ${theme.default} calc(100% - 24px), transparent);
                mask-image: linear-gradient(90deg, ${theme.default} 0%, ${theme.default} calc(100% - 24px), transparent);
            }
            .${names.tabContainerClassName} .${names.tabClassName}-close:hover{ background-color: ${theme.default}; }

            .${names.tabFocusClassName}{ background:${theme.focusTabBackgroundColor}; color: ${theme.focusTabTextColor} }
            // .${names.tabWrapClassName} li:not(:first-child).${names.tabFocusClassName} .${names.tabClassName}-title{
            //     flex: 1;
            //     overflow: hidden;
            //     white-space: nowrap;
            //     -webkit-mask-image: linear-gradient(90deg, ${theme.default} 0%, ${theme.default} calc(100% - 24px), transparent);
            //     mask-image: linear-gradient(90deg, ${theme.default} 0%, ${theme.default} calc(100% - 24px), transparent);
            // }

            .${names.tabContainerClassName}::after{
                content: '';
                width: 1px;
                position: absolute;
                top: 50%;
                left:0;
                height: 18px;
                margin-top: -10px;
                background:${theme.splitBorderColor};
            }
            .${names.tabContainerClassName} .${names.tabClassName}-mark {
                position: relative;
                z-index: 1;
            }
            .${names.tabContainerClassName}:hover .${names.tabClassName}::after {
                content: attr(data-tip);
                // width: 100%;
                white-space: nowrap;
                background: #333;
                color: #fff;
                position: absolute;
                top: 70px;
                left: 50%;
                transform: translate(-50%, calc(-100% - 10px));
                padding: 0 4px;
                border-radius: 4px;
                text-align: center;
            }
            .${names.tabContainerClassName}:hover .${names.tabClassName}::before {
                content: '';
                width: 15px;
                height: 15px;
                background: #333;
                position: absolute;
                top: 48px;
                left: 50%;
                transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
            }
        `
    }

    render(){
        const style = document.createElement("style");
        style.innerHTML = `
            ${this.getClass()}
        `;
        document.head.appendChild(style);
    }

}

